<template>
	<div class="message">
		<div class="h4">
			店铺信息
		</div>
		
		<div class="content">
		
			<div class="C_d">
				<span>*身份证名称</span>
				<input type="text" class="text" ref="name"/>
			</div>
			
			<div class="C_d">
				<span>身份证号</span>
				<input type="text" class="text" ref="hao" @blur="hao" maxlength="18"/>
			</div>
			
			<div class="C_d">
				<span>联系电话</span>
				<input type="text" class="text" ref="tel" :placeholder="list.storePhone" disabled="disabled"/>
			</div>
			
			<div class="C_d">
				<span>所在低区</span>
				<!--<span class="text" @click="areabut">{{myAddressProvince}} {{myAddressCity}} {{myAddresscounty}}</span>-->
				<input type="text" class="text" :placeholder="list.storeArea" disabled='disabled' />
			</div>
			<!--取消 确定-->
			<!--<div class="mask" v-show="maskcon">
				<div class="maskarea"></div>
				<mt-picker class="areainfo" :slots="myAddressSlots" @change="onMyAddressChange"></mt-picker>
				<div class="maskbutcon">
					<div class="cancelbut" @click="cancelbut">取消</div>
					<div class="masksurebut" @click="surebut">确定</div>
				</div>
			</div>-->
			
			<div class="C_d">
				<textarea cols="100%" rows="8"  ref="site"  class="site" :placeholder="list.storeAddress"></textarea>
			</div>
			
			<div class="h4">
				服务经理信息
			</div>
			
			<div class="C_d">
				<span>服务经理编号</span>
				<input type="text" class="text" :placeholder="list.saleNum" disabled="disabled" ref='fu'/>
			</div>
			
			<div class="C_d">
				<span>服务经理名称</span>
				<input type="text" class="text" :placeholder="list.saleName" ref='funame'/>
			</div>
			
			<div class="C_d">
				<span>手机号</span>
				<input type="text" class="text"  ref='futel' :placeholder="list.salePhone" disabled="disabled"/>
			</div>
			<div class="C_dd">
				<button @click="tijiao">提交</button>
			</div>
			
		</div>
		
	</div>
	
</template>

<script>
	import myaddress from '../address/address3.json'
	import { Picker } from 'mint-ui';
	import { BaseUrl } from '../Baseurl/common.js';
	import { Toast } from 'mint-ui';
	export default {
		data() {
			return {
				successlist: [],
				partnerId:'',
				list:[],
				storeArea:'',
				storeAddress:'',
				salePartnerId:'',
				myAddressSlots: [{
						flex: 1,
						defaultIndex: 1,
						values: Object.keys(myaddress), //省份数组
						className: 'slot1',
						textAlign: 'center'
					}, {
						divider: true,
						content: '-',
						className: 'slot2'
					}, {
						flex: 1,
						values: [],
						className: 'slot3',
						textAlign: 'center'
					},
					{
						divider: true,
						content: '-',
						className: 'slot4'
					},
					{
						flex: 1,
						values: [],
						className: 'slot5',
						textAlign: 'center'
					}
				],
				myAddressProvince: '省',
				myAddressCity: '市',
				myAddresscounty: '区/县',
				maskcon: false,
			}
		},
		components: {
			'mt-picker': Picker,

		},
		created(){
			var href = window.location.href;
			this.partnerId = this.$route.query.partnerId
//			alert(this.partnerId)
			var url = BaseUrl + 'partner/order2/initSubmitIdentity?storePartnerId=' + this.partnerId
//			console.log(url)
			this.$http.get(url).then(res=>{
					if(res.data.code == '10000'){
//						console.log(res.data.data)
						this.list = res.data.data
						this.storeArea = res.data.data.storeArea
						this.storeAddress = res.data.data.storeAddress
						this.salePartnerId = res.data.data.salePartnerId
					}
			})
		},
		methods: {
			onMyAddressChange(picker, values) {
				if(myaddress[values[0]]) { //这个判断类似于v-if的效果（可以不加，但是vue会报错，很不爽）
					picker.setSlotValues(1, Object.keys(myaddress[values[0]])); // Object.keys()会返回一个数组，当前省的数组
					picker.setSlotValues(2, myaddress[values[0]][values[1]]); // 区/县数据就是一个数组
					this.myAddressProvince = values[0];
					this.myAddressCity = values[1];
					this.myAddresscounty = values[2];
				}
			},
			surebutton: function() {
				var name = this.$refs.name.value;
				var phone = this.$refs.phone.value;
				var addressarea = this.myAddressProvince + this.myAddressCity + this.myAddresscounty;
				var moreaddress = this.$refs.moreaddress.value;
				var smallurl = 'receiverName=' + name + '&receiverPhone=' + phone + '&city=' + addressarea + '&detail=' + moreaddress;
			//	alert(smallurl);
				var url = BaseUrl+'users/address/add?token='+this.token+'&appId=gzh&' + smallurl+'&isdefault=0';
				this.$http.post(url).then(res => {
					this.successlist = res
					this.$router.go(-1);
					//console.log(res.data.data);
				})
			},
			areabut: function() {
				this.maskcon = true;
			},
			cancelbut: function() {
				this.maskcon = false;
			},
			surebut: function() {
				this.maskcon = false;
			},
			hao:function(){
				var idcardNum = this.$refs.hao.value;
				var reg =/^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/
				if(reg.test(idcardNum) == false){
					Toast({
						message: "请输入正确的身份证号",
						position: 'middle',
						duration: 3000
					})
				}
			},
			tijiao:function(){
				if(this.$refs.tel.value == ''){
					var storePhone = this.$refs.tel.placeholder;
				}else{
					var storePhone = this.$refs.tel.value;
				}
				if(this.$refs.site.value == ''){
					var site = this.$refs.site.placeholder;
				}else{
					var site = this.$refs.site.value;
				}
				var idcardName = this.$refs.name.value;
				var idcardNum = this.$refs.hao.value;
				var saleNum = this.$refs.fu.placeholder;
				var salePhone = this.$refs.futel.placeholder;
				
				if(this.$refs.funame.value == ''){
					var saleName = this.$refs.funame.placeholder
				}else{
					var saleName = this.$refs.funame.value
				}
//				var saleName = this.$refs.funame.placeholder;
				
				
				var url = BaseUrl + 'partner/order2/submitIdentity?storePartnerId=' + this.partnerId +'&storePhone=' + storePhone + '&storeArea=' + this.storeArea +"&storeAddress=" +site +'&idcardNum=' + idcardNum + "&idcardName=" +idcardName + "&saleNum=" + saleNum + "&salePhone=" + salePhone + '&saleName=' +saleName + "&salePartnerId=" + this.salePartnerId
				
				
				if(idcardName == '' || idcardNum == '' || site == ''){
					Toast({
						message: "请完善信息",
						position: 'middle',
						duration: 3000
					})
				}
				else if(!/^[\u4e00-\u9fa5]+$/gi.test(saleName)){
					Toast({
						message: "服务经理名称必须是汉字",
						position: 'middle',
						duration: 3000
					})
				}
				else{
					this.$http.post(url).then(res =>{
						var puhuoId = res.data.data
						if(res.data.code == 10000){
							this.$router.push({
								path: '/order?puhuoId= ' + puhuoId
							})
						}
					})
				}
				
				
			}
		},
		mounted() {
			this.$nextTick(() => { //vue里面全部加载好了再执行的函数  （类似于setTimeout）
				this.myAddressSlots[0].defaultIndex = 0
				// 这里的值需要和 data里面 defaultIndex 的值不一样才能够初始化
				//因为我没有看过源码（我猜测是因为数据没有改变，不会触发更新）
			});
		}
	}
</script>

<style scoped="scoped">
	.message{
		width: 100%;
		height: 100%;
		overflow-y: auto;
	}
	.h4{
		width: 100%;
		box-sizing: border-box;
		padding: 0.2rem 0.2rem;
		border-bottom: 1px solid #333333;
	}
	.C_d{
		padding: 0.2rem 0.2rem;
		display: flex;
		justify-content:space-between;
	}
	.site{
		border:1px solid #333333;
		padding: 0.2rem;
	}
	.text{
		width: 5rem;
		outline: none;
		border: 1px solid #333333;
		background: #FFFFFF;
	}
	.C_dd{
		padding: 0.2rem 0.2rem;
		text-align: right;
	}
	button{
		width: 2rem;
	}
</style>